<template>
	<view class="body-view">
		<!--导航和状态栏-->
		<view class="state-navigation">
			<view class="slim_header_navigation d-flex a-center j-center" >
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">设置打卡成员</view>
				<view class="right_box">
					<!-- <image src="/static/center/dian.png" class="dian"></image> -->
				</view>
			</view>
		</view>
		<!-- 顶部位置占位 -->
		<view style="height:calc(100rpx + var(--status-bar-height));"></view>
		<view class="content">
			<view class="search_box d-flex a-center j-center">
			    <view class="search d-flex a-center">
			        <i class="tmicon tmicon-search" style="color:#ccc;font-size:30rpx;"></i>
			        <input type="text" class="inp" @input="search" v-model="state.searchText" placeholder="请输入成员昵称" placeholder-style="color:#ccc;font-size:25rpx;" >
			    </view>
			</view>
		    <view class="nodata" v-if="state.members==null||state.members.length<1">
				<image class="nodata-img" src="/static/img/nodata.png" alt="" />
				<view class="text">竟然什么都没有~</view>
		    </view>
			<scroll-view v-else scroll-y="true" class="scroll-member" >
				<view @tap="onJoinClock(item)" class="member-row d-flex a-center j-between" :style="{ background: isSelect(item)?'#E8F9F4':'#FFFFFF' }" v-for="item in state.members">
					<view class="row-left d-flex">
						<userhead
						    width="100"
						    height="100"
						    :saveKey="item.userId"
						    :isVip="item.isVip"
						    :src="item.userPhoto"
						/>
						<rich-text class="d-flex a-center" :nodes="item.nodes"></rich-text>
					</view>
					<view class="row-right">
							<image v-if="isSelect(item)" style="width: 32rpx;height: 32rpx;" src="@/static/image/diet-menu-check-true.png"></image>
							<image v-else style="width: 32rpx;height: 32rpx;" src="@/static/image/sports-menu-check-false.png"></image>
					</view>
				</view>
			</scroll-view>
				<tm-button _style="margin:0 auto 0 auto;font-weight: 600;" :width="690" :height="80" :shadow="-1" round="5"
				    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="submit"
				    :label="`${selectCount}/${state.all_members.length}&nbsp;确定`"></tm-button>
		</view>
	</view>
</template>

<script setup lang="tsx" name="clockinMember">
import { onLoad } from "@dcloudio/uni-app";
import { ref,reactive } from "vue";
import { getGroupMember,setupClockUser } from "@/api/api";
import userhead from "@/components/userhead.vue";

const goBack = () => {
	uni.navigateBack();
};
const groupId = ref();
const joinClockType = ref();
onLoad((options:any)=>{
	groupId.value = options.groupId; 
	joinClockType.value = options.joinClockType; 
	reqGroupMember();
});
const onJoinClock = (item:any) => {
	if(joinClockType.value==1)item.isJoinClock = !item.isJoinClock;
	if(joinClockType.value==2)item.isJoinClock2 = !item.isJoinClock2;
	if(joinClockType.value==3)item.isJoinClock3 = !item.isJoinClock3;
	
	
	let result = state.all_members.filter((res:any) => res.userId == item.userId);
	if(joinClockType.value==1)result[0].isJoinClock = item.isJoinClock;
	if(joinClockType.value==2)result[0].isJoinClock2 = item.isJoinClock2;
	if(joinClockType.value==3)result[0].isJoinClock3 = item.isJoinClock3;
	
	countSelect();
};
//根据类型返回改用户是否选中
const isSelect = (item:any) =>{
	if(item.isJoinClock&&joinClockType.value==1)return true;
	if(item.isJoinClock2&&joinClockType.value==2)return true;
	if(item.isJoinClock3&&joinClockType.value==3)return true;
	return false;
}
//计算选中的数量
const selectCount = ref(0);
const countSelect = () => {
	selectCount.value = (state.all_members.filter((item:any) => isSelect(item) == true)).length;
};
const init = ()=>{
    const clone_all_members = JSON.parse(JSON.stringify(state.all_members))

    state.members = clone_all_members.map(((item:any)=>{
		let color = "#333333";
		if(item.isVip===2)color = "#F19945";
        return {
            ...item,
            nodes:`<div style="color: ${color};
					padding-left:10px;
                    font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
                    text-align: center;">${item.userName||item.userId}</div>`
        }
    }))
	
}
const matchTextHighLight = ()=>{
    const reg = new RegExp(state.searchText,'gi');
    state.members = state.members.map((item:any)=>{
		let color = "#333333";
		if(item.isVip===2)color = "#F19945";
        const obj = {
            ...item,
        }
        const str = item.userName||item.userId;

        const nodes = `<div style="color:${color};
                    font-size: 32rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    text-align: center;">${str.replace(reg,(s:any)=>{
            return `<span style="color:#23e2a6">${s}</span>`
        })}</div>`

        obj.nodes = nodes;
        return obj
    })
}
const search = ()=> {
	if(!state.searchText){
	    init();
	    return
	}
	state.members = state.all_members.filter((item:any)=>{
	    const str = item.userName||item.userId
	
	    if(str.toLowerCase().search(state.searchText.toLowerCase())!==-1){
	        return true;
	    }else{
	        return false;
	    }
	});
	matchTextHighLight();
};
const state:any = reactive({
    searchText:'',
    members:[],
    all_members:[],
})
const reqGroupMember = async()=>{
    const res:any = await getGroupMember({groupId:groupId.value});
    const {flag,data} = res;
    if(flag!==1){
        uni.showToast({
			icon: "none",
			title:'获取成员列表失败',
			duration: 1500,
		});
    }
    const members:any = [];
    data.list.forEach((item:any)=>{
        if(item.role==='Tourist'){
           // vistor.push(item);
        }else{
            members.push(item);
			if(isSelect(item))oIdSelectUser.push(item.userId);
        }
    })
    state.all_members = members;
	countSelect();
    init();
}
const oIdSelectUser:any = [];
const submit = () => {
	//console.log(oIdSelectUser.value)
	let newSelectUser:any = [];
	let selectUser = state.all_members.filter((item:any) => isSelect(item) == true);
	
	selectUser.forEach((item:any) => {
		newSelectUser.push(item.userId.toString());
	});
	const deletedValues = oIdSelectUser.filter((value:string) => !newSelectUser.includes(value));  
	const addedValues = newSelectUser.filter((value:string) => !oIdSelectUser.includes(value));
	let params = {
		groupId:groupId.value,
		joinClockType:joinClockType.value,
		addClockUsers:addedValues,
		delClockUsers:deletedValues
	}
	setupClockUser(params).then((res:any) => {
		if(res.success){
			uni.showToast({
				icon: "none",
				title:'设置成功',
				duration: 1500,
			});
			goBack();
		}else{
			uni.showToast({
				icon: "none",
				title:res.msg,
				duration: 1500,
			});
		}
	})
};
</script>

<style lang="scss" scoped>
@import './clockinMember.scss';
</style>
